<template>
	<div class="app-container">
		<div class="zd3">
			<div class="zd3-title">
				<p>
					<span>供应商名称</span>
					<input v-model="username" type="text" placeholder="请输入供应商名称" />
				</p>
				<p>
					<span>单位电话</span>
					<input v-model="workPhone" type="text" placeholder="请输入单位电话" />
				</p>
				<p>
					<span>首要联系人</span>
					<input v-model="contactPeo" type="text" placeholder="请输入首要联系人" />
				</p>
				<h3 @click="getList">查询</h3>
				<h4 @click="resetList">重置</h4>
				<h3 @click="addPeople" style="background: #0093FF">新增</h3>
			</div>
			<div class="zd3-btm">
				<!-- <div class="addDate" @click="addPeople">+ 新增成员</div> -->
				<el-table :data="tableData" style="width: 100%;border-radius: 8px;" v-loading="loading">
					<el-table-column type="index" align="center" width="50" label="序号" fixed="left" />
					<el-table-column align="center" prop="supplierName" label="供应商名称" fixed="left" />
					<el-table-column align="center" prop="supplierNumber" width="150" label="单位电话" />
					<el-table-column align="center" prop="supplierPerson" width="100" label="首要联系人" />
					<el-table-column align="center" prop="tempaddress" label="单位地址" />
					<el-table-column align="center" prop="insertTime" width="160" label="登记日期" />
					<!-- <el-table-column align="center" width="100" label="状态" fixed="right">
						<template slot-scope="scope">
							<p class="status" :class="scope.row.status == 0 ? '' : 'status-active'">{{ scope.row.status == 0 ? '禁用' : '启用' }}</p>
						</template>
					</el-table-column> -->
					<el-table-column align="center" width="150" label="操作" fixed="right">
						<template slot-scope="scope">
							<el-button type="text" size="small" @click="write(scope.row, scope.$index)">编辑</el-button>
							<el-popconfirm placement="top" hideIcon title="是否要删除此行？" @onConfirm="deleteRow(scope.row)">
								<el-button type="text" size="small" slot="reference">删除</el-button>
							</el-popconfirm>
							<!-- <el-button type="text" size="small" v-if="scope.row.status == 0" @click="hanlder(scope.row,1)">启用</el-button> -->
              <!-- <el-button type="text" size="small" v-else @click="hanlder(scope.row,0)">禁用</el-button> -->
						</template>
					</el-table-column>
				</el-table>
				<el-pagination 
					background 
					align="right"
					layout="prev, pager, next" 
					:total="total" 
					@prev-click="goPrev" 
					@next-click="goNext" />
			</div>
		</div>
		<el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" :modal-append-to-body="false" :modal="true" width="60%">
			<div class="change">
				<p>
					<span>供应商名称</span>
					<input type="text" v-model="tempData.supplierName" placeholder="请输入往来单位名称" />
				</p>
				<p>
					<span>单位电话</span>
					<input type="text" v-model="tempData.supplierNumber" maxlength="11" placeholder="请输入往来单位电话" />
				</p>
				<p>
					<span>首要联系人</span>
					<input type="text" v-model="tempData.supplierPerson" placeholder="请输入首要联系人" />
				</p>
				<!-- <p>
					<span>联系人电话</span>
					<input type="text" v-model="tempData.supplierNumber" placeholder="请输入联系人电话" />
				</p> -->
				<p>
					<span>单位地址</span>
					<el-cascader
						size="large"
						:options="addressArr"
						class="userselect"
						v-model="selectedOptions"
						@change="handleChange">
					</el-cascader>
				</p>
				<p>
					<span>单位详细地址</span>
					<input type="text" v-model="xxdz" placeholder="请输入单位详细地址" />
				</p>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="save">保存</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { getGongying, addGongying, updateGongying, deleteGongying } from '@/api/caigou'
import { regionData, CodeToText, TextToCode } from 'element-china-area-data'
export default {
	data() {
		return {
			username: '',    //供应商名称
			workPhone: '',   //公司电话
			contactPeo: '',  //首要联系人
			total: 1,
			pages: 1,
			loading: true,
			showHeader: false,
			addressArr: regionData,
			selectedOptions: [],
			tableData: [],
			dialogVisible: false,
			tempData: '',
			tempIndex: -1,
			tempadd: '',
			xxdz: ''
		};
	},
	mounted() {
		this.getList()
	},
	methods: {
		handleChange (value) {
			console.log(value)
			this.tempadd = value
			const address = value.map(item => {
				return CodeToText[item]
			})
			this.tempData.supplierLocation = address.join(',')
			console.log(address)
		},
		getList() {
			const param = {
				supplierName: this.username ? this.username : null,
				supplierNumber: this.workPhone ? this.workPhone : null,
				supplierPerson: this.contactPeo ? this.contactPeo : null
				// pageNum: this.pages
			}
			getGongying(param).then(res => {
				console.log(res)
				res.data.map(item => {
					item.tempaddress = item.supplierLocation.replace(/\,/g,'')
					return item
				})
				this.tableData = res.data
				this.loading = false
			})
		},
		write(item, index) {
			console.log(item)
			this.tempIndex = index
			this.tempData = item
			// this.value = item.supplierLocation
			const addresstemp = item.supplierLocation.split(',')
			// console.log(TextToCode[addresstemp[0]].code)
			// console.log(TextToCode[addresstemp[0]][addresstemp[1]].code)
			// console.log(TextToCode[addresstemp[0]][addresstemp[1]][addresstemp[2]].code)
			this.selectedOptions = [TextToCode[addresstemp[0]].code,TextToCode[addresstemp[0]][addresstemp[1]].code,TextToCode[addresstemp[0]][addresstemp[1]][addresstemp[2]].code]
			this.xxdz = addresstemp[3]
			// this.selectedOptions = addresstemp.reduce((prev, cur, index, arr) => {
			// 	return TextToCode[prev].code
			// })
			console.log('select')
			console.log(this.selectedOptions)
			this.dialogVisible = true
		},
		save() {
			this.tempData.supplierLocation = this.tempData.supplierLocation+','+this.xxdz
			if(this.tempIndex == -1){
				addGongying(this.tempData).then(res => {
					console.log(res)
					this.$message({
						showClose: true,
						message: res.message,
						type: 'success'
					})
					this.getList()
					this.dialogVisible = false
				})
			}else{
				updateGongying(this.tempData).then(res => {
					console.log(res)
					this.$message({
						showClose: true,
						message: res.message,
						type: 'success'
					})
					this.getList()
					this.dialogVisible = false
				})
			}
		},
		// 启用禁用状态
		hanlder(item,index){
			console.log(item,index)
			updateGongying({supplierId: item.supplierId,status: index}).then(res => {
				console.log(res)
				this.$message({
					showClose: true,
					message: res.message,
					type: 'success'
				})
				this.getList()
			})
		},
		deleteRow(item) {
			console.log('删除');
			console.log(item)
			deleteGongying(item.supplierId).then(res => {
				console.log(res)
				this.$message({
					showClose: true,
					message: res.message,
					type: 'success'
				})
				this.getList()
			})
		},
		goPrev(page) {
			console.log(page);
			this.pages--
			this.getList()
		},
		goNext(page) {
			console.log(page);
			this.pages++
			this.getList()
		},
		goPage(page){
			this.pages = page
			this.getList()
		},
		resetList() {
			this.username = ''
			this.workPhone = '' 
			this.contactPeo = ''
		},
		addPeople(item) {
			this.dialogVisible = true
			this.tempIndex = -1
			this.xxdz = ''
			this.selectedOptions = ''
			this.tempData = {
				supplierLocation: '',
				supplierName: '',
				supplierNumber: '',
				supplierPerson: '',
			};
		}
	}
};
</script>

<style lang="scss" scoped>
/deep/.el-button--primary {
	color: #fff;
	background-color: #18a05e !important;
	border-color: #18a05e !important;
}
/deep/.el-button--primary:hover,
.el-button--primary:focus {
	background: #18a05e !important;
	border-color: #18a05e !important;
	color: #fff !important;
}
/deep/.el-button:hover,
.el-button:focus {
	color: #18a05e;
	background-color: transparent;
}
/deep/.el-button--primary {
	color: #fff;
	background-color: #18a05e;
	border-color: #18a05e;
}
/deep/.el-button--text {
	color: #00c666 !important;
}
.app-container {
	padding: 20px;
}
.status {
	border-radius: 3px;
	font-size: 14px;
	width: 50px;
	color: #fff;
	background: #777777;
	margin: 0 auto;
}
.status-active {
	background: #18a05e;
}
.inps {
	width: 100%;
	height: 32px;
	line-height: 32px;
	padding-left: 10px;
	background: none;
	border: none;
	color: #333;
}
.inps-active {
	width: 100%;
	height: 32px;
	line-height: 32px;
	padding-left: 10px;
	// background:#ccc;
	border: none;
	color: #333;
}
.zd3-title {
	height: 80px;
	display: flex;
	align-items: center;
	padding: 0 20px;
	position: relative;
	background: #ffffff;
	border-radius: 8px;
	border: 1px solid rgba(0, 0, 0, 0.1);

	> p {
		font-size: 14px;
		color: #333;
		margin-right: 20px;

		> span {
			padding-right: 10px;
		}

		> input {
			width: 180px;
			height: 32px;
			// background: #ccc;
			border-radius: 3px;
			border: 1px solid #ccc;
			padding-left: 10px;
			color: #333;
		}
	}

	> h3 {
		width: 64px;
		height: 32px;
		background: #18a05e;
		border-radius: 3px;
		margin: 0 30px 0 0;
		color: #fff;
		font-size: 14px;
		line-height: 32px;
		font-weight: 100;
		text-align: center;
		cursor: pointer;
	}

	> h4 {
		width: 64px;
		height: 32px;
		border-radius: 3px;
		border: 1px solid rgba(0, 0, 0, 0.1);
		color: #333;
		font-size: 14px;
		line-height: 32px;
		font-weight: 100;
		text-align: center;
		cursor: pointer;
		margin-right: 30px;
	}
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #18a05e !important;
  color: #fff;
}
.zd3-btm /deep/.btn-prev:after {
  content: "上一页";
}
.zd3-btm /deep/.btn-next:before {
  content: "下一页";
}
.zd3-btm /deep/.btn-prev,
.zd3-btm /deep/.btn-next {
  width: 65px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}
.zd3-btm {
	background: rgba(255, 255, 255, 1);
	border-radius: 8px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	margin-top: 20px;
	overflow: hidden;
	&-title {
		display: flex;
		align-items: center;
		height: 70px;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		background: #ffffff;
		> p {
			text-align: center;
			font-size: 16px;
			color: #333;
		}
	}
	.el-pagination {
		white-space: nowrap;
		padding: 15px 5px;
		color: #303133;
		font-weight: bold;
	}
	.addDate {
		margin: 20px 32px 10px 32px;
		height: 32px;
		border-radius: 3px;
		text-align: center;
		line-height: 32px;
		font-size: 14px;
		color: #333;
		cursor: pointer;
		border: 1px dashed rgba(0, 0, 0, 0.25);
	}
	.el-button--text {
		margin: 0 15px;
	}
}
.change {
	display: flex;
	flex-wrap: wrap;
	> p {
		width: 50%;
		font-size: 14px;
		display: flex;
		align-items: center;
		color: #333;
		/deep/.el-input__inner {
			// width: inherit;
			background: none;
			height: 32px;
			color: #333;
			border: 1px solid rgba(0, 0, 0, 0.1);
			padding: 0 25px;
		}
		/deep/.el-input__icon {
			line-height: 32px;
		}
		.userselect {
			flex: 1;
		}

		> span {
			display: block;
			width: 120px;
			text-align: right;
			padding-right: 15px;
		}
		> input {
			width: inherit;
			flex: 1;
			height: 32px;
			border-radius: 3px;
			border: 1px solid rgba(0, 0, 0, 0.1);
			padding-left: 10px;
			color: #333;
		}
	}
}
</style>
